<template>
  <v-card flat min-height="400">
    <v-form ref="form" class="form py-5 px-6">
      <v-row no-gutters class="line">
        <v-col class="label" cols="3">Location Code</v-col>
        <v-col class="text-left" cols="8">
          <v-card flat width="40%">
            <v-text-field
              v-model="formData.locationCode"
              v-validate="'required'"
              name="Location Code"
              class="white-input"
              placeholder="Enter Location Code"
              dense
              solo
              hide-details
            ></v-text-field>
          </v-card>
          <span class="vee-validate-error">
            {{ errors.first("Location Code") }}
          </span>
        </v-col>
      </v-row>
      <v-row no-gutters class="line">
        <v-col class="label" cols="3">Contact Person</v-col>
        <v-col class="text-left" cols="6">
          <v-text-field
            v-model="formData.contactPerson"
            v-validate="'required'"
            name="Contact Person"
            class="white-input"
            placeholder="Enter Contact Person Name"
            dense
            solo
            hide-details
          ></v-text-field>
          <span class="vee-validate-error">
            {{ errors.first("Contact Person") }}
          </span>
        </v-col>
      </v-row>
      <v-row no-gutters class="line align-start">
        <v-col class="label" cols="3">User Name</v-col>
        <v-col class="text-left" cols="6">
          <v-text-field
            v-model="formData.userName"
            v-validate="'required'"
            name="User Name"
            class="white-input"
            placeholder="Enter User Name"
            dense
            solo
            hide-details
          ></v-text-field>
          <span class="vee-validate-error">
            {{ errors.first("User Name") }}
          </span>
        </v-col>
      </v-row>
      <v-row no-gutters class="line align-start">
        <v-col class="label" cols="3">Tel</v-col>
        <v-col class="text-left" cols="6">
          <v-text-field
            v-model="formData.tel"
            v-validate="'required|phone'"
            name="Tel"
            class="white-input"
            placeholder="Enter Tel"
            dense
            solo
            hide-details
          ></v-text-field>
          <span class="vee-validate-error">
            {{ errors.first("Tel") }}
          </span>
        </v-col>
      </v-row>
      <v-row no-gutters class="line align-start">
        <v-col class="label" cols="3">Mobile Number</v-col>
        <v-col class="text-left" cols="6">
          <v-text-field
            v-model="formData.mobileNumber"
            v-validate="'required|mobile'"
            name="Mobile Number"
            class="white-input"
            placeholder="Enter Mobile Number"
            dense
            solo
            hide-details
          ></v-text-field>
          <span class="vee-validate-error">
            {{ errors.first("Mobile Number") }}
          </span>
        </v-col>
      </v-row>
      <v-row no-gutters class="line align-start">
        <v-col class="label" cols="3">Email</v-col>
        <v-col class="text-left" cols="6">
          <v-text-field
            v-model="formData.email"
            v-validate="'required|email'"
            name="Email"
            class="white-input"
            placeholder="Enter Email"
            dense
            solo
            hide-details
          ></v-text-field>
          <span class="vee-validate-error">
            {{ errors.first("Email") }}
          </span>
        </v-col>
      </v-row>
      <v-row no-gutters class="line align-start">
        <v-col class="label" cols="3">Fax Number</v-col>
        <v-col class="text-left" cols="6">
          <v-text-field
            v-model="formData.faxNumber"
            v-validate="'required'"
            name="Fax Number"
            class="white-input"
            placeholder="Enter Fax Number"
            dense
            solo
            hide-details
          ></v-text-field>
          <span class="vee-validate-error">
            {{ errors.first("Fax Number") }}
          </span>
        </v-col>
      </v-row>
    </v-form>
  </v-card>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import VForm from "vuetify/src/components/VForm/index";
import { IContactPerson } from "@/components/Customer/index";
@Component({
  components: {},
})
export default class AddEditContactPerson extends Vue {
  formData = {
    id: "",
    locationCode: "",
    contactPerson: "",
    userName: "",
    tel: "",
    mobileNumber: "",
    email: "",
    faxNumber: "",
  };

  resetForm() {
    this.formData.id = "";
    type VFormInstance = InstanceType<typeof VForm>;
    const formRef = this.$refs.form as VFormInstance;
    formRef.reset();
  }

  setFormData(formData: object) {
    Object.assign(this.formData, formData);
  }

  async validateFormData() {
    const valid: boolean = await this.$validator.validate();
    if (valid) {
      return this.getFormData();
    } else {
      return false;
    }
  }

  getFormData(): IContactPerson {
    return JSON.parse(JSON.stringify(this.formData));
  }
}
</script>
<style lang="scss" scoped>
@import "@/components/Maintenance/Dialog/DialogForm.scss";
</style>
